<template>
<div class="axios">
  <div v-if="!repoName">loading.....</div>
  <div v-else>most star repo is <a :href="repoUrl">{{repoName}}</a></div>
</div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'AxiosMain',
  data () {
    return {
      repoName: '',
      repoUrl: ''
    }
  },
  mounted () {
    const url = 'https://api.github.com/search/repositories?q=v&sort=stars'
    /* this.$http.get(url).then(
      response => {
        const result = response.data
        const mostRepo = result.items[0]
        this.repoName = mostRepo.name
        this.repoUrl = mostRepo.html_url
      },
      reponse => {
        alert("请求失败！")
      }
    ) */
    axios.get(url).then(
      response => {
        const result = response.data
        const mostRepo = result.items[0]
        this.repoName = mostRepo.name
        this.repoUrl = mostRepo.html_url
      }
    ).catch((error) => {
      if (error) alert('请求失败！')
    })
  }
}
</script>

<style scoped>
.axios{
  font-size: 36px;
  color: #42b983;
  text-align: center;
}
</style>
